<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>顶部框</title>
    <style>
    </style>
</head>
<nav class="navbar navbar-expand navbar-light" th:fragment="header-nav"
     style="justify-content: center; position: sticky; top: 0; z-index: 1">
    <!-- 内容 -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a th:href="@{/index}" class="nav-link">
                <i class="nav-icon fa fa-home"></i>
                <b>首页</b>
            </a>
        </li>
        <li class="nav-item">
            <th:block th:if="${session.user}">
                <a class="nav-link" href="#" data-toggle="modal" data-target="#modal-petCategories" id="petMatch">
                    <i class="nav-icon fa fa-paw"></i>
                    <b>宠物匹配</b>
                </a>
            </th:block>
            <th:block th:unless="${session.user}">
                <a class="nav-link" th:href="@{/login}">
                    <i class="nav-icon fa fa-paw"></i>
                    <b>宠物匹配</b>
                </a>
            </th:block>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/search?postType=0}">
                <i class="nav-icon fa fa-eye-slash"></i>
                <b>丢失宠物</b>
            </a>
        </li>
        <li class="nav-item" style="margin-right: 16px">
            <a class="nav-link" th:href="@{/search?postType=1}">
                <i class="nav-icon fa fa-box-open"></i>
                <b>招领宠物</b>
            </a>
        </li>
    </ul>
    <!-- 搜索栏 -->
    <form class="form-inline" onsubmit="return false">
        <div class="input-group input-group-sm" style="width: 400px">
            <input class="form-control form-control-navbar" type="search" placeholder="搜索帖子名称或内容"
                   aria-label="搜索" id="searchInput">
            <div class="input-group-append">
                <button class="btn btn-navbar" type="button" id="searchButton">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </form>
    <!-- 登录/头像 -->
    <div style="background-color: #d4d4d5; height: 42px; width: 42px; border-radius: 50%;
        display: flex; justify-content: center; align-items: center;
        margin-left: 32px; margin-right: 16px">
        <!-- 判断session显示头像 -->
        <th:block th:if="${session.user}">
            <img th:src="${session.user.profileUrl}" alt="头像" style="width: 100%; height: 100%; border-radius: 50%">
        </th:block>
        <th:block th:unless="${session.user}">
            <a th:href="@{/login}" style="color: rgba(0, 0, 0, 1)">
                登录
            </a>
        </th:block>
    </div>

    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" th:href="@{/profile}">
                <span class="fas fa-user"></span>
                <b>个人中心</b>
            </a>
        </li>
        <li class="nav-item" style="margin-left: 16px">
            <a th:href="@{/post/createPost}" class="nav-link" style="background-color: #ec951e; border-radius: 15px">
                <i class="fas fa-arrow-alt-circle-up"></i>
                <b>发布</b>
            </a>
        </li>
    </ul>
</nav>
<nav th:fragment="header-nav-model">
    <!-- model -->
    <!-- 分类展示框 -->
    <div class="modal fade" id="modal-petCategories">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="color: #ffc107">
                        <i class="nav-icon fa fa-paw"></i>
                        宠物信息
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 宠物类别 帖子类型 -->
                    <div class="form-group" style="display: flex">
                        <div>
                            <label>宠物类别</label>
                            <div style="display: flex">
                                <div>
                                    <select id="firstPetCategories" class="form-control select2"
                                            style="width: 200px;height: 30px">
                                    </select>
                                </div>
                                <div style="margin-left: 20px">
                                    <select id="secondPetCategories" class="form-control select2"
                                            style="width: 200px;height: 30px">
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 148px;">
                            <label for="headPostType">发布类型</label><br>
                            <input type="checkbox" name="headPostType" id="headPostType" checked data-bootstrap-switch
                                   data-off-color="info" data-on-color="danger"
                                   data-off-text="招领" data-on-text="丢失">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>地区选择</label>
                        <div style="display: flex">
                            <div>
                                <select id="firstAddresses" class="form-control select2"
                                        style="width: 200px;height: 30px">
                                </select>
                            </div>
                            <div style="margin-left: 20px">
                                <select id="secondAddresses" class="form-control select2"
                                        style="width: 200px;height: 30px">
                                </select>
                            </div>
                            <div style="margin-left: 20px">
                                <select id="thirdAddresses" class="form-control select2"
                                        style="width: 318px;height: 30px">
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- 图片 -->
                    <div class="form-group" style="display: flex; margin-top: 25px">
                        <div>
                            <h6><b>添加宠物主图（完整样貌）</b></h6>
                            <!--主图-->
                            <a id="headOpenMainImage" href="#" style="font-size: 70px; color: #63d9ec;">
                                <i class="fas fa-image"></i>
                            </a>
                            <div id="headMainImageDiv" style="width: 80px; height: 80px; display: none">
                                <img src="" alt="未选择" class="w-100 h-100">
                            </div>
                            <input type="file" id="headMainImage" name="headMainImage" style="display: none">
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-outline-success" id="find">
                        查询
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</nav>
<body>

</body>
</html>